<template>
  <div>
    <div class="thy_menu" v-for="(items, index) in arrayConversionFunc(routes)" :key="index">
      <div class="thy_menu_title" :class="{ borderTop: index != 0 }">
        <el-divider direction="vertical" class="dividerClass"></el-divider>
        <span>{{ items.identifying }}</span>
      </div>
      <div v-for="item in items.childs" :key="item.path">
        <div v-if="itemPageFunc(item)" class="thy_menu_box">
          <div class="thy_menu_item" :class="[activeIndex == item.path ? 'thy_menu_active' : '']" @click="toPageClick(item)">
            <svg-icon
              :icon-class="item.meta.icon ? item.meta.icon : ''"
              className="svgIcons"
              :style="{ color: item.iconColor ? item.iconColor : '' }"
            ></svg-icon>
            <span>{{ item.meta.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
import usePermissionStore from '@/store/modules/permission';
import useUserStore from '@/store/modules/user';
const userStore: any = useUserStore();

const permissionStore = usePermissionStore();
const sidebarRouters = computed<any[]>(() => permissionStore.getSidebarRoutes());
const activeIndex = ref('');
const route = useRoute();
const router = useRouter();

const routes = computed(() => {
  let currentRoutes = { children: sidebarRouters.value };
  const matchedRoutes = route.matched;

  for (let i = 0; i < matchedRoutes.length - 1; i++) {
    currentRoutes = currentRoutes.children.find((e: any) => {
      return e.name === matchedRoutes[i].name;
    }) || { children: [] };
  }

  return currentRoutes.children;
});

// 监听路由变化
watch(
  route,
  (newRoute, oldRoute) => {
    const valArr = newRoute.path.split('/');
    activeIndex.value = valArr[valArr.length - 1];
  },
  { deep: true, immediate: true }
);

const toPageClick = (item: { path: string }) => {
  const pathArr = route.path.split('/');
  pathArr[pathArr.length - 1] = item.path;
  const path = pathArr.join('/');
  router.push(path);
};

const arrayConversionFunc = (arr1: any) => {
  const arr = [];
  arr1.forEach((item) => {
    if (item.path === 'enterpriseList') {
      return; // 如果是，则跳过当前循环
    }
    const parent = arr.find((cur) => cur.identifying === item.identifying);
    if (parent) {
      // console.log(item);
      if (!item.hidden) {
        parent.childs.push(item);
      }
    } else {
      if (!item.hidden) {
        const obj = {
          identifying: item.identifying,
          childs: [item]
        };
        arr.push(obj);
      }
    }
  });
  return arr;
};
// 页面显示方法
const itemPageFunc = (item: any) => {
  // 摆渡页面单独的配置
  if (item.path == 'document-ferry') {
    return !item.hidden && userStore?.ferrySwitch;
  } else {
    return !item.hidden;
  }
};
</script>
  <style scoped lang='scss'>
.pageBox {
  display: flex;
  width: 100%;
  height: calc(100vh - 50px);
  .pageLeft {
    width: 200px;
    height: 100%;
    border-right: 1px solid #eee;
    .thy_menu {
      .borderTop {
        border-top: 1px solid #f5f5f5;
      }
    }
    .thy_menu_title {
      width: 100%;
      padding: 18px 20px;
      color: #999;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .dividerClass {
      width: 3px;
      border-radius: 2px;
      margin: 0 6px 0 2px;
      height: 16px;
      background-color: #6698ff;
    }
    .thy_menu_item {
      width: 100%;
      padding: 11px 20px;
      color: #333333;
      font-size: 15px;
      cursor: pointer;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      &:hover {
        background-color: #f5f5f5;
      }
    }
    .thy_menu_active {
      background-color: rgba(102, 152, 255, 0.1);
      color: #6698ff;
    }
    .svgIcons {
      font-size: 15px;
      vertical-align: middle;
      margin-right: 10px;
      margin-left: 4px;
    }
  }

  .pageRight {
    width: calc(100% - 260px);
  }
}
</style>